<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素样式|尺寸操作</title>
		<!-- 元素样式操作：直接操作元素的样式下的属性和属性值 
		css()            功能--
		                 1个参：传入css属性名
						 功能：获取匹配元素集合中第一个元素的css属性值
						 2个参：传入css属性名和属性值
						 功能：设置匹配元素集合中第一个元素的css属性值
						 n个参：传入多个css属性名和属性值
						 语法糖：css({"属性名":"属性值",
						             "属性名":"属性值",
									 "属性名":"属性值"})
						 功能：设置匹配元素集合中第一个元素的css属性值
		width()和height()  功能：匹配元素集合中第一个元素宽高度
		                   无参：获取匹配元素集合中第一个元素宽高度
						   有参：设置匹配元素集合中第一个元素宽高度
						   width(数值)  注：不加px
		outerWidth()和outerHeight() 
		出现原因：元素存在盒子中，盒子模型，宽度计算方式：内外边距+边框+内容
		无参：获取元素的宽高度，计算盒子模型：内边距+边框
		有参:传入bool值，true时，计算盒子模型：内外边距+边框
		-->
		<style>
			.box{
				background-color:#ffe4ff ;
				padding: 20px;
				margin: 20px;
				border: 5px solid #00ffff;
			}
			.result{
				margin-top: 10px;
				font-weight: 700;
			}
		</style>
	<script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- css：.box添加样式：背景颜色、内外边距：20px 边框5px 
		          .result添加样式：上外边距：10px，字体加粗
				  引入jq框架
		-->
		<!-- 1.显示效果区域 -->
		<div class="box" id="targetBox"></div>
		<button id="getColorbtn">获取颜色属性值</button>
		<button id="setColorbtn">设置颜色效果</button>
		<button id="setBtn">设置多属性效果</button>
		<button id="gsBtn"> 获取元素宽度/设置元素宽度</button>
		<button id="bpBtn">获取高度(内边距+边框)</button>
		<button id="bpmBtn">获取高度(内外边距+边框)</button>
		<!-- 2.结果提示功能区域 -->
		<div class="result" id="result"></div>
	<script>
		/* 1.点击 获取颜色属性值 按钮 获取颜色值并打印页面上 */
		$("#getColorbtn").click(function(){
			//获取css属性值方式：传入属性名即可
			var bgColor=$(".box").css("background-color");
			//页面上打印属性值
			$("#result").text("获取的属性值是:"+bgColor);
		});
		/* 2.点击 设置颜色效果 按钮 设置颜色值并打印页面上 */
		$("#setColorbtn").click(function(){
			//改成橙色
			$(".box").css("background-color","orange");
			$("#result").text("改变后颜色为：橙色");
		});
		$("#setBtn").click(function(){
			$(".box").css({"background-image":"url(../img/图片1.gif)",
			               "border":"5px solid #ff0",
						   "width":"300px",
						   "height":"300px",
						   "background-size":"100% 100%",
			               "box-shadow":"5px 5px 10px #c6ffff",
						   "border-radius":"50%"});
		});
	    /* 4.点击 获取 设置宽度*/
		$("#gsBtn").click(function(){
			var w=$(".box").width(400);
			$("#result").text("获取的宽度是:"+w+"px");
		});
		/* 5.点击 获取高度  按钮  计算box空间高度 */
		$("#bpBtn").click(function(){
		var bp=$(".box").outerHeight();
		$("#result").text("获取高度为:"+bp+"px");
		});
	    $("#bpmBtn").click(function(){
		var bp=$(".box").outerHeight(true);
		$("#result").text("获取高度为:"+bp+"px");
		});
		
	</script>
	</body>
</html>